<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}导航条{% endblock %}</title>
    {#    引入jquery#}
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 引入bootstrap -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- echarts -->
    <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts-en.common.js"></script>
    <!--vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- <script src="/static/js/vue.min.js"></script> -->
    <!-- MDUI -->
    <link rel="stylesheet" href="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/css/mdui.min.css">
    <script src="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/js/mdui.min.js"></script>
    {% block script_link %}{% endblock %}
    <style>
        body {
            background: rgba(244, 247, 251, 1);
        }

        #nav {
            width: 250px;
            height: 1224px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 3px 0px 15px rgba(0, 0, 0, 0.05);
            opacity: 1;
            padding-top: 28px;
            float: left;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        #logo {
            margin-left: 45px;
            margin-top: 58px;
            margin-bottom: 31px;
        }

        #nav ul li {
            height: 88px;
        }

        #nav img {
            padding-left: 68px;
            width: 26px;
        }

        #nav a {
            width: 52px;
            height: 16px;
            font-size: 19px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 88px;
            color: rgba(158, 173, 197, 1);
            margin-left: 17px;
            letter-spacing: 3px;
            text-decoration: none;
            opacity: 1;
        }
    </style>
    <script type="text/javascript">
        function display(x) {
            x.style.background = "linear-gradient(90deg,rgba(71,137,255,0.47) 0%,rgba(71,137,255,0.1) 56%,rgba(36,69,128,0)100%)";
            var name = x.className;
            name = "/static/image/index/" + name + "(1).png";
            // alert(name);
            x.firstElementChild.src = name;
        }

        function normal(x) {
            x.style.background = "#FFFFFF";
            var name = x.className;
            name = "/static/image/index/" + name + ".png";
            // alert(name);
            x.firstElementChild.src = name;
        }
    </script>
    {% block style %}

    {% endblock style %}
    {% block js %}
    {% endblock js %}


</head>
<body>
<!-- 导航条 -->
<div id="nav">
    {#    <div id="logo">logo</div>#}
    <div id="logo">
        <img style="width: 50px; padding: 0;" src="/static/image/index/logo.png"/>
        <div style="width:96px;font-size: 26px;float:right;font-family: Microsoft YaHei;font-weight: bold;line-height: 26px;color: rgba(71, 137, 255, 1);opacity: 1;margin-right: 49px;margin-top: 6px">AsHome</div>
    </div>
    <ul>
        <li class="managedata" {% block managedata %}onmousemove="display(this)"
            onmouseout="normal(this)"{% endblock %}>
            <img src="/static/image/index/managedata.png"/>
            <a href="/index">运营数据</a>
        </li>
        <li class="usermanage" {% block usermanage %}onmousemove="display(this)"
            onmouseout="normal(this)"{% endblock %}>
            <img src="/static/image/index/usermanage.png"/>
            <a href="/udo/info/query">用户管理</a>
        </li>
        <li class="useranalysis" {% block useranalysis %}onmousemove="display(this)"
            onmouseout="normal(this)"{% endblock %}>
            <img src="/static/image/index/useranalysis.png"/>
            <a href="/udo/analysis/index">用户分析</a>
        </li>
        <li class="hotelmanage" {% block hotelmanage %}onmouseover="display(this)"
            onmouseout="normal(this)"{% endblock %}>
            <img src="/static/image/index/hotelmanage.png"/>
            <a href="/acdo/query">酒店事务</a>
        </li>
        <li class="hotelmoney" {% block hotelmoney %}onmouseover="display(this)"
            onmouseout="normal(this)"{% endblock %}>
            <img src="/static/image/index/hotelmoney.png"/>
            <a href="/fdo/query">酒店财务</a>
        </li>
        <li class="staffmanage" {% block staffmanage %}onmouseover="display(this)"
            onmouseout="normal(this)"{% endblock %}>
            <img src="/static/image/index/staffmanage.png"/>
            <a href="/smdo/query">员工管理</a>
        </li>
        <li class="basesettings" {% block basesettings %}onmouseover="display(this)"
            onmouseout="normal(this)"{% endblock %}>
            <img src="/static/image/index/basesettings.png"/>
            <a href="#">基础配置</a>
        </li>
    </ul>
{#    <a href="/login">登陆</a>#}
{#    <a href="/logout">登出</a>#}
</div>
{% block body %}
{% endblock body %}

</body>
</html>